<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>后台登陆</title>
    <base href="${basePath}">
    <link rel="stylesheet" href="static/plugins/layui/css/layui.css">
    <script src="static/plugins/jquery-3.1.0.js"></script>
    <script src="static/plugins/layui/layui.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">用车申请系统后台</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    ${loginInfo.nickname}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" id="info">个人信息</a></dd>
                    <dd><a href="javascript:;" id="password">修改密码</a></dd>
                    <dd><a href="javascript:;" id="logout">退出系统</a></dd>
                </dl>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" id="menu" lay-filter="menu">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">系统管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="userinfo" target="manager">用户管理</a></dd>
                        <dd><a class="layui-this" href="role" target="manager">角色管理</a></dd>
                        <dd><a href="banner" target="manager">轮播管理</a></dd>
                        <dd><a href="enterprise" target="manager">网站管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="school" target="manager">校区管理</a></li>
                <li class="layui-nav-item"><a href="teacher" target="manager">教师管理</a></li>
                <li class="layui-nav-item"><a href="project2" target="manager">课程管理</a></li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <iframe name="manager" width="100%" height="100%" allowfullscreen src="welcome" frameborder="no"></iframe>
        </div>
    </div>
</div>
</body>
<script>
    let element;

    function getMenuList() {
        $.ajax({
            url: "menu/list",
            method: "get",
            dataType: "json",
            success(res) {
                if (res.code === 200) {
                    const menuList = res.data;
                    let $html = '';
                    for (const menu of menuList) {
                        $html += '<li class="layui-nav-item layui-nav-itemed">';
                        /*判断导航是否为跳转链接*/
                        let href = 'javascript:;';
                        let target = '';
                        if (menu.type === 2) {
                            href = menu.href;
                            target = 'target="manager"';
                        }
                        $html += '<a class="" href="' + href + '" ' + target + '><i style="margin-right: 5px" class="layui-icon ' + menu.icon + '"></i>' + menu.name + '</a>';
                        if (menu?.children?.length > 0) {
                            $html += '<dl class="layui-nav-child">';
                            for (const m of menu.children) {
                                const power = m.children.map(item => item.name)
                                $html += '<dd><a data-power="' + power.toString() + '" href="' + m.href + '" target="manager">' + m.name + '</a></dd>';
                            }
                            $html += '</dl>';
                        }
                        $html += '</li>';
                    }
                    $("#menu").empty().append($html);
                    // 渲染导航组件
                    element.render('nav', 'menu');
                    /*绑定跳转链接的单机事件*/
                    $('a[target]').click(function () {
                        const power = $(this).data("power");
                        sessionStorage.setItem("power", power);
                        sessionStorage.setItem("active", $(this).index("a[target]"))
                    })
                    /*处理菜单的默认选项*/
                    const index = sessionStorage.getItem("active");
                    $("a[target]").eq(index).addClass("layui-this")
                    const href = $("a[target]").eq(index).attr("href");
                    $("iframe").attr('src', href);
                } else {
                    layer.alert(res.msg, {icon: 5});
                }
            }
        })
    }


    $(function () {
        layui.use(function () {
            element = layui.element;
            getMenuList();
            $("#password").click(function () {
                layer.open({
                    type: 2,
                    title: "修改密码",
                    area: ["450px", "400px"],
                    content: "userinfo?param=pwd"
                });
            });
            $("#logout").click(function () {
                layer.confirm("确定退出系统吗？", {icon: 3, title: "退出系统"}, function (index) {
                    top.location.replace("userinfo?param=logout")
                    layer.close(index);
                });
            });
            $("#info").click(function () {
                sessionStorage.setItem("dataId", "${loginInfo.userinfoId}");
                layer.open({
                    type: 2,
                    title: "用户详情",
                    area: ["450px", "400px"],
                    content: "userinfo?param=edit"
                })
            });
        });
    })
</script>
</html>
